<template>
  <div v-if="show">
    <el-form label-position="top" size="small">
      <el-button v-if="tables" type="text" style="float:right" :disabled="data.type =='grid' || data.type == 'tabs' || data.type == 'report' || data.type == 'divider'" @click="changeselectablenwinshow(true)">{{ $t('fm.config.widget.selecttable') }}</el-button>
      <el-form-item v-if="data.type != 'td' && tables" :label="$t('fm.config.widget.tableCode')">
        <el-input v-model="data.tableCode" :disabled="data.type =='grid' || data.type == 'tabs' || data.type == 'report' || data.type == 'divider'" />
      </el-form-item>
      <el-form-item v-if="data.type != 'td'" :label="$t('fm.config.widget.model')">
        <el-input v-model="data.model" :disabled="data.type =='grid' || data.type == 'tabs' || data.type == 'report' || data.type == 'divider'" />
      </el-form-item>
      <el-form-item v-if="data.type!='grid' && data.type != 'tabs' && data.type != 'report' && data.type != 'td'" :label="$t('fm.config.widget.name')">
        <el-input v-model="data.name" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('width')>=0" :label="$t('fm.config.widget.width')">
        <el-input v-model="data.options.width" />
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('height')>=0" :label="$t('fm.config.widget.height')">
        <el-input v-model="data.options.height" />
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('size')>=0" :label="$t('fm.config.widget.size')">
        {{ $t('fm.config.widget.width') }} <el-input v-model.number="data.options.size.width" style="width: 90px;" type="number" />
        {{ $t('fm.config.widget.height') }} <el-input v-model.number="data.options.size.height" style="width: 90px;" type="number" />
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('labelWidth')>=0 && !data.options.tableColumn" :label="$t('fm.config.widget.labelWidth')">
        <el-checkbox v-model="data.options.isLabelWidth" style="margin-right: 5px;">{{ $t('fm.config.widget.custom') }}</el-checkbox>
        <el-input-number v-model="data.options.labelWidth" :disabled="!data.options.isLabelWidth" :min="0" :max="99999" :step="10" />
      </el-form-item>

      <!--hideLabel-->
      <el-form-item v-if="data.type !='grid' && data.type != 'tabs' && data.type != 'report' && data.type != 'divider' && data.type != 'td'" :label="$t('fm.config.widget.hideLabel')">
        <el-switch v-model="data.options.hideLabel" />
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='time' && data.type!='date')" :label="$t('fm.config.widget.placeholder')">
        <el-input v-model="data.options.placeholder" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('inline')>=0" :label="$t('fm.config.widget.layout')">
        <el-radio-group v-model="data.options.inline">
          <el-radio-button :label="false">{{ $t('fm.config.widget.block') }}</el-radio-button>
          <el-radio-button :label="true">{{ $t('fm.config.widget.inline') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('contentPosition') >= 0" :label="$t('fm.config.widget.contentPosition')">
        <el-radio-group v-model="data.options.contentPosition">
          <el-radio-button label="left">{{ $t('fm.config.widget.left') }}</el-radio-button>
          <el-radio-button label="center">{{ $t('fm.config.widget.center') }}</el-radio-button>
          <el-radio-button label="right">{{ $t('fm.config.widget.right') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('showInput')>=0" :label="$t('fm.config.widget.showInput')">
        <el-switch v-model="data.options.showInput" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('min')>=0" :label="$t('fm.config.widget.min')">
        <el-input-number v-model="data.options.min" :step="1" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('max')>=0" :label="$t('fm.config.widget.max')">
        <el-input-number v-model="data.options.max" :step="1" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('step')>=0" :label="$t('fm.config.widget.step')">
        <el-input-number v-model="data.options.step" :min="-99999" :max="99999" :step="1" />
      </el-form-item>
      <el-form-item v-if="data.type=='select' || data.type=='imgupload' || data.type == 'fileupload'" :label="$t('fm.config.widget.multiple')">
        <el-switch v-model="data.options.multiple" @change="handleSelectMuliple" />
      </el-form-item>
      <el-form-item v-if="data.type=='select'" :label="$t('fm.config.widget.filterable')">
        <el-switch v-model="data.options.filterable" />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('allowHalf')>=0" :label="$t('fm.config.widget.allowHalf')">
        <el-switch
          v-model="data.options.allowHalf"
        />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('showAlpha')>=0" :label="$t('fm.config.widget.showAlpha')">
        <el-switch
          v-model="data.options.showAlpha"
        />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('showLabel')>=0" :label="$t('fm.config.widget.showLabel')">
        <el-switch
          v-model="data.options.showLabel"
        />
      </el-form-item>
      <el-form-item v-if="Object.keys(data.options).indexOf('options')>=0" :label="$t('fm.config.widget.option')">
        <el-radio-group v-model="data.options.remote" size="mini" style="margin-bottom:10px;">
          <el-radio-button :label="false">{{ $t('fm.config.widget.staticData') }}</el-radio-button>
          <el-radio-button :label="true">{{ $t('fm.config.widget.remoteData') }}</el-radio-button>
        </el-radio-group>
        <template v-if="data.options.remote">
          <div>
            <el-radio-group v-model="data.options.remoteType">
              <el-radio label="option">{{ $t('fm.config.widget.remoteAssigned') }}</el-radio>
              <el-radio label="func">{{ $t('fm.config.widget.remoteFunc') }}</el-radio>
            </el-radio-group>
            <el-input v-if="data.options.remoteType == 'option'" v-model="data.options.remoteOption" size="mini" style="margin-bottom: 5px;" />
            <el-input v-if="data.options.remoteType == 'func'" v-model="data.options.remoteFunc" size="mini" style="margin-bottom: 5px;" />
            <el-input v-model="data.options.props.value" size="mini">
              <div slot="prepend" style="width: 30px;">{{ $t('fm.config.widget.value') }}</div>
            </el-input>
            <el-input v-model="data.options.props.label" size="mini">
              <div slot="prepend" style="width: 30px;">{{ $t('fm.config.widget.label') }}</div>
            </el-input>
            <el-input v-model="data.options.props.dicFlag " size="mini">
              <div slot="prepend" style="width: 30px;">{{ $t('fm.config.widget.params') }}</div>
            </el-input>
          </div>
        </template>
        <template v-else>
          <template v-if="data.type=='radio' || (data.type=='select'&&!data.options.multiple)">
            <el-radio-group v-model="data.options.defaultValue">
              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-radio
                    :label="item.value"
                    style="margin-right: 5px;"
                  >
                    <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" />
                    <el-input v-if="data.options.showLabel" v-model="item.label" style="width:90px;" size="mini" />
                    <!-- <input v-model="item.value"/> -->
                  </el-radio>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
                  <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />

                </li>
              </draggable>

            </el-radio-group>
          </template>

          <template v-if="data.type=='checkbox' || (data.type=='select' && data.options.multiple)">
            <el-checkbox-group v-model="data.options.defaultValue">

              <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.options.options" :key="index">
                  <el-checkbox
                    :label="item.value"
                    style="margin-right: 5px;"
                  >
                    <el-input v-model="item.value" :style="{'width': data.options.showLabel? '90px': '180px' }" size="mini" />
                    <el-input v-if="data.options.showLabel" v-model="item.label" style="width:90px;" size="mini" />
                  </el-checkbox>
                  <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
                  <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />

                </li>
              </draggable>
            </el-checkbox-group>
          </template>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddOption">{{ $t('fm.actions.addOption') }}</el-button>
          </div>
        </template>

      </el-form-item>

      <el-form-item v-if="data.type=='cascader'" :label="$t('fm.config.widget.remoteData')">
        <div>
          <el-radio-group v-model="data.options.remoteType">
            <el-radio label="option">{{ $t('fm.config.widget.remoteAssigned') }}</el-radio>
            <el-radio label="func">{{ $t('fm.config.widget.remoteFunc') }}</el-radio>
          </el-radio-group>
          <el-input v-if="data.options.remoteType == 'option'" v-model="data.options.remoteOption" size="mini" style="margin-bottom: 5px;" />
          <el-input v-if="data.options.remoteType == 'func'" v-model="data.options.remoteFunc" size="mini" style="margin-bottom: 5px;" />
          <el-input v-model="data.options.props.value" size="mini" style="">
            <template slot="prepend">{{ $t('fm.config.widget.value') }}</template>
          </el-input>
          <el-input v-model="data.options.props.label" size="mini" style="">
            <template slot="prepend">{{ $t('fm.config.widget.label') }}</template>
          </el-input>
          <el-input v-model="data.options.props.children" size="mini" style="">
            <template slot="prepend">{{ $t('fm.config.widget.childrenOption') }}</template>
          </el-input>
        </div>
      </el-form-item>

      <el-form-item v-if="Object.keys(data.options).indexOf('defaultValue')>=0 && (data.type == 'text' || data.type == 'textarea' || data.type == 'input' || data.type=='number' || data.type=='rate' || data.type=='color' || data.type=='switch' || data.type == 'html')" :label="$t('fm.config.widget.defaultValue')">
        <el-input v-if="data.type=='textarea'" v-model="data.options.defaultValue" type="textarea" :rows="5" />

        <template v-if="data.type=='input' || data.type == 'text'">
          <template v-if="data.options.dataType == 'number' || data.options.dataType == 'integer' || data.options.dataType == 'float'">
            <el-input v-model.number="data.options.defaultValue" type="number" />
          </template>
          <template v-else>
            <el-input v-model="data.options.defaultValue" />
          </template>
        </template>

        <el-rate v-if="data.type == 'rate'" v-model="data.options.defaultValue" style="display:inline-block;vertical-align: middle;" :max="data.options.max" :allow-half="data.options.allowHalf" />
        <el-button v-if="data.type == 'rate'" type="text" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click="data.options.defaultValue=0">{{ $t('fm.actions.clear') }}</el-button>
        <el-color-picker
          v-if="data.type == 'color'"
          v-model="data.options.defaultValue"
          :show-alpha="data.options.showAlpha"
        />
        <el-switch v-if="data.type=='switch'" v-model="data.options.defaultValue" />
        <el-input-number
          v-if="data.type=='number'"
          v-model="data.options.defaultValue"
          :step="data.options.step"
          :min="data.options.min"
          :max="data.options.max"
        />

        <template v-if="data.type == 'html'">
          <code-editor :key="data.key" v-model="data.options.defaultValue" height="200px" />
        </template>
      </el-form-item>

      <template v-if="data.type == 'time' || data.type == 'date'">
        <el-form-item v-if="data.type == 'date'" :label="$t('fm.config.widget.showType')">
          <el-select v-model="data.options.type">
            <el-option value="year" />
            <el-option value="month" />
            <el-option value="date" />
            <el-option value="dates" />
            <!-- <el-option value="week"></el-option> -->
            <el-option value="datetime" />
            <el-option value="datetimerange" />
            <el-option value="daterange" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.type == 'time'" :label="$t('fm.config.widget.isRange')">
          <el-switch
            v-model="data.options.isRange"
          />
        </el-form-item>
        <el-form-item v-if="data.type == 'date'" :label="$t('fm.config.widget.isTimestamp')">
          <el-switch
            v-model="data.options.timestamp"
          />
        </el-form-item>
        <el-form-item v-if="(!data.options.isRange && data.type == 'time') || (data.type != 'time' && data.options.type != 'datetimerange' && data.options.type != 'daterange')" :label="$t('fm.config.widget.placeholder')">
          <el-input v-model="data.options.placeholder" />
        </el-form-item>
        <el-form-item v-if="(data.options.isRange) || data.options.type=='datetimerange' || data.options.type=='daterange'" :label="$t('fm.config.widget.startPlaceholder')">
          <el-input v-model="data.options.startPlaceholder" />
        </el-form-item>
        <el-form-item v-if="data.options.isRange || data.options.type=='datetimerange' || data.options.type=='daterange'" :label="$t('fm.config.widget.endPlaceholder')">
          <el-input v-model="data.options.endPlaceholder" />
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.format')">
          <el-input v-model="data.options.format" />
        </el-form-item>
        <el-form-item v-if="data.type=='time' && Object.keys(data.options).indexOf('isRange')>=0" :label="$t('fm.config.widget.defaultValue')">
          <el-time-picker
            v-if="!data.options.isRange"
            key="1"
            v-model="data.options.defaultValue"
            style="width: 100%;"
            :arrow-control="data.options.arrowControl"
            :value-format="data.options.format"
          />
          <el-time-picker
            v-if="data.options.isRange"
            key="2"
            v-model="data.options.defaultValue"
            style="width: 100%;"
            is-range
            :arrow-control="data.options.arrowControl"
            :value-format="data.options.format"
          />
        </el-form-item>
      </template>

      <template v-if="data.type=='imgupload' || data.type=='fileupload'">

        <el-form-item :label="$t('fm.config.widget.limit')">
          <el-input v-model.number="data.options.limit" type="number" />
        </el-form-item>
        <el-form-item v-if="Object.keys(data.options).indexOf('tip')>=0" :label="$t('fm.config.widget.tip')">
          <el-input v-model="data.options.tip" />
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.isQiniu')">
          <el-switch v-model="data.options.isQiniu" />
        </el-form-item>
        <template v-if="data.options.isQiniu">
          <el-form-item label="Domain" :required="true">
            <el-input v-model="data.options.domain" />
          </el-form-item>
          <el-form-item :label="$t('fm.config.widget.tokenFunc')" :required="true">
            <el-input v-model="data.options.tokenFunc" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item :label="$t('fm.config.widget.action')" :required="true">
            <el-input v-model="data.options.action" />
          </el-form-item>
          <el-form-item :label="$t('fm.config.widget.headers')">
            <ul>
              <li v-for="(item, index) in data.options.headers" :key="index" style="margin-bottom: 5px;">
                <el-input v-model="item.key" type="textarea" clearable :rows="1" placeholder="KEY" size="mini" style="width: 100px;margin-right:5px;" />

                <el-input v-model="item.value" type="textarea" clearable :rows="1" placeholder="VALUE" size="mini" style="width: 130px;" />

                <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />

              </li>
            </ul>
            <div>
              <el-button type="text" @click="handleAddHeader">{{ $t('fm.actions.add') }}</el-button>
            </div>
          </el-form-item>
        </template>
      </template>

      <template v-if="data.type=='blank'">
        <el-form-item :label="$t('fm.config.widget.defaultType')">
          <el-select v-model="data.options.defaultType">
            <el-option value="String" :label="$t('fm.config.widget.string')" />
            <el-option value="Object" :label="$t('fm.config.widget.object')" />
            <el-option value="Array" :label="$t('fm.config.widget.array')" />
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type == 'component'">
        <el-form-item :label="$t('fm.config.widget.customTemplates')">
          <!-- <code-editor :key="data.key" mode="html" v-model="data.options.template" height="200px"></code-editor> -->
          <el-button style="width: 100%;" @click="handleSetTemplate">{{ $t('fm.config.widget.setting') }}</el-button>
        </el-form-item>

        <code-dialog ref="codeDialog" mode="html" @on-confirm="handleTemplateConfirm" />
      </template>

      <template v-if="data.type == 'grid'">
        <el-form-item :label="$t('fm.config.widget.gutter')">
          <el-input v-model.number="data.options.gutter" type="number" />
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.flex')">
          <el-switch v-model="data.options.flex" />
        </el-form-item>
        <!-- responsive -->
        <el-form-item :label="$t('fm.config.widget.responsive')">
          <el-switch v-model="data.options.responsive" />
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.columnOption')">
          <draggable
            tag="ul"
            :list="data.columns"
            v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.columns" :key="index">
              <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>

              <el-input v-if="!data.options.responsive" v-model.number="item.span" :placeholder="$t('fm.config.widget.span')" size="mini" style="width: 100px;" type="number" />

              <template v-if="data.options.responsive">
                <div style="display: inline-block;">
                  <div style="display: flex; flex-direction: column; margin:0 10px 10px 10px;">
                    <span>
                      <span style="width: 25px; display: inline-block;">xs: </span><el-input v-model.number="item.xs" placeholder="xs" size="mini" style="width: 100px;" type="number" />
                      <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'<768px'" />
                    </span>
                    <span>
                      <span style="width: 25px; display: inline-block;">sm: </span><el-input v-model.number="item.sm" placeholder="sm" size="mini" style="width: 100px;" type="number" />
                      <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'≥768px'" />
                    </span>
                    <span>
                      <span style="width: 25px; display: inline-block;">md: </span><el-input v-model.number="item.md" placeholder="md" size="mini" style="width: 100px;" type="number" />
                      <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'≥992px'" />
                    </span>
                    <span>
                      <span style="width: 25px; display: inline-block;">lg: </span><el-input v-model.number="item.lg" placeholder="lg" size="mini" style="width: 100px;" type="number" />
                      <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'≥1200px'" />
                    </span>
                    <span>
                      <span style="width: 25px; display: inline-block;">xl: </span><el-input v-model.number="item.xl" placeholder="xl" size="mini" style="width: 100px;" type="number" />
                      <pre style="width: 55px; display: inline; color: #999; margin-left: 5px;" v-html="'≥1920px'" />
                    </span>
                  </div>
                </div>
              </template>

              <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />

            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddColumn">{{ $t('fm.actions.addColumn') }}</el-button>
          </div>
        </el-form-item>
        <el-form-item v-if="data.options.flex" :label="$t('fm.config.widget.justify')">
          <el-select v-model="data.options.justify">
            <el-option value="start" :label="$t('fm.config.widget.justifyStart')" />
            <el-option value="end" :label="$t('fm.config.widget.justifyEnd')" />
            <el-option value="center" :label="$t('fm.config.widget.justifyCenter')" />
            <el-option value="space-around" :label="$t('fm.config.widget.justifySpaceAround')" />
            <el-option value="space-between" :label="$t('fm.config.widget.justifySpaceBetween')" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="data.options.flex" :label="$t('fm.config.widget.align')">
          <el-select v-model="data.options.align">
            <el-option value="top" :label="$t('fm.config.widget.alignTop')" />
            <el-option value="middle" :label="$t('fm.config.widget.alignMiddle')" />
            <el-option value="bottom" :label="$t('fm.config.widget.alignBottom')" />
          </el-select>
        </el-form-item>
      </template>

      <template v-if="data.type == 'tabs'">
        <el-form-item :label="$t('fm.config.widget.type')">
          <el-radio-group v-model="data.options.type">
            <el-radio-button label="">{{ $t('fm.config.widget.default') }}</el-radio-button>
            <el-radio-button label="card">{{ $t('fm.config.widget.card') }}</el-radio-button>
            <el-radio-button label="border-card">{{ $t('fm.config.widget.borderCard') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.tabPosition')">
          <el-radio-group v-model="data.options.tabPosition">
            <el-radio-button label="top">{{ $t('fm.config.widget.top') }}</el-radio-button>
            <el-radio-button label="left">{{ $t('fm.config.widget.left') }}</el-radio-button>
            <el-radio-button label="right">{{ $t('fm.config.widget.right') }}</el-radio-button>
            <el-radio-button label="bottom">{{ $t('fm.config.widget.bottom') }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.tabOption')">
          <draggable
            tag="ul"
            :list="data.tabs"
            v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
            handle=".drag-item"
          >
            <li v-for="(item, index) in data.tabs" :key="index">
              <i class="drag-item" style="font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-icon_bars" /></i>
              <el-input v-model="item.label" :placeholder="$t('fm.config.widget.tabName')" size="mini" style="width: 200px;" />

              <el-button circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;" @click="handleOptionsRemove(index)" />

            </li>
          </draggable>
          <div style="margin-left: 22px;">
            <el-button type="text" @click="handleAddTab">{{ $t('fm.actions.addTab') }}</el-button>
          </div>
        </el-form-item>
      </template>

      <template v-if="data.type == 'report'">
        <el-form-item :label="$t('fm.config.widget.borderWidth')">
          <el-input-number v-model="data.options.borderWidth" :min="0" :step="1" />
        </el-form-item>
        <el-form-item :label="$t('fm.config.widget.borderColor')">
          <el-color-picker
            v-model="data.options.borderColor"
          />
        </el-form-item>
      </template>

      <el-form-item v-if="Object.keys(data.options).includes('customClass')" :label="$t('fm.config.widget.customClass')">
        <el-input v-model="data.options.customClass" clearable />
      </el-form-item>

      <el-form-item :label="$t('fm.config.widget.attribute')">
        <el-checkbox v-if="Object.keys(data.options).indexOf('dataBind')>=0 && !data.options.tableColumn" v-model="data.options.dataBind" :disabled="data.type != 'blank' && data.type != 'component'">{{ $t('fm.config.widget.dataBind') }}	</el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('hidden')>=0 && !data.options.tableColumn" v-model="data.options.hidden">{{ $t('fm.config.widget.hidden') }}	</el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('readonly')>=0" v-model="data.options.readonly">{{ $t('fm.config.widget.readonly') }} </el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('disabled')>=0" v-model="data.options.disabled">{{ $t('fm.config.widget.disabled') }}	</el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('editable')>=0" v-model="data.options.editable">{{ $t('fm.config.widget.editable') }} </el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('clearable')>=0" v-model="data.options.clearable">{{ $t('fm.config.widget.clearable') }} </el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('arrowControl')>=0" v-model="data.options.arrowControl">{{ $t('fm.config.widget.arrowControl') }} </el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('isDelete')>=0" v-model="data.options.isDelete">{{ $t('fm.config.widget.isDelete') }} </el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('isEdit')>=0" v-model="data.options.isEdit">{{ $t('fm.config.widget.isEdit') }} </el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('showPassword')>=0" v-model="data.options.showPassword">{{ $t('fm.config.widget.showPassword') }} </el-checkbox>
        <el-checkbox v-if="Object.keys(data.options).indexOf('showScore')>=0" v-model="data.options.showScore">{{ $t('fm.config.widget.showScore') }} </el-checkbox>

      </el-form-item>

      <template v-if="data.type != 'grid' && data.type != 'tabs' && data.type != 'report' && data.type != 'divider' && data.type != 'td'">

        <el-form-item :label="$t('fm.config.widget.validate')">
          <div v-if="Object.keys(data.options).indexOf('required')>=0" class="validate-block">
            <el-checkbox v-model="data.options.required">{{ $t('fm.config.widget.required') }}</el-checkbox>

            <el-input v-if="data.options.required" v-model="data.options.requiredMessage" size="mini" class="message-input" clearable :placeholder="$t('fm.message.errorTip')" />
          </div>
          <div v-if="Object.keys(data.options).indexOf('dataType')>=0" class="validate-block">
            <el-checkbox v-model="data.options.dataTypeCheck" style="margin-right: 10px;" />
            <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" :disabled="!data.options.dataTypeCheck" size="mini">
              <el-option value="string" :label="$t('fm.config.widget.string')" />
              <el-option value="number" :label="$t('fm.config.widget.number')" />
              <el-option value="integer" :label="$t('fm.config.widget.integer')" />
              <el-option value="float" :label="$t('fm.config.widget.float')" />
              <el-option value="url" :label="$t('fm.config.widget.url')" />
              <el-option value="email" :label="$t('fm.config.widget.email')" />
              <el-option value="hex" :label="$t('fm.config.widget.hex')" />
            </el-select>

            <el-input v-if="data.options.dataTypeCheck" v-model="data.options.dataTypeMessage" size="mini" class="message-input" clearable :placeholder="$t('fm.message.errorTip')" />
          </div>

          <div v-if="Object.keys(data.options).indexOf('pattern')>=0" class="validate-block">
            <el-checkbox v-model="data.options.patternCheck" style="margin-right: 10px;" />
            <el-input v-model.lazy="data.options.pattern" :disabled="!data.options.patternCheck" size="mini" style=" width: 239px;" :placeholder="$t('fm.config.widget.patternPlaceholder')" />
            <el-input v-if="data.options.patternCheck" v-model="data.options.patternMessage" size="mini" class="message-input" clearable :placeholder="$t('fm.message.errorTip')" />
          </div>
        </el-form-item>
      </template>
    </el-form>
    <vxe-modal  title="选择指标" :value="selectablenwin"  width="20vw" style="z-index:200" @show="selectablenwinOpen" @close='changeselectablenwinshow(false)'>
      <div style="height:400px; ">
        <el-container>
          <el-main >
            <el-select v-model="tableid" style="width:100%" placeholder="请选择" >
              <el-option
                v-for="item in tableList"
                :key="item.code"
                :label="item.name"
                :value="item.tableId"
              />
            </el-select>
            <el-tree
              ref="fieldtree"
              :data="treedata"
              :show-checkbox="true"
            >
              <template slot-scope="{node,data}">{{ data.name }}</template>
            </el-tree>
          </el-main>
          <el-footer>
            <el-button @click="sureTabClumn">确定</el-button>
            <el-button @click="changeselectablenwinshow(false)">关闭</el-button>
          </el-footer>
        </el-container>

      </div>
    </vxe-modal>
  </div>
  <div v-else class="empty">
    {{ $t('fm.description.configEmpty') }}
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import CodeEditor from '../components/CodeEditor'
import CodeDialog from './CodeDialog'
import request from '@/utils/requestutil'
export default {
  components: {
    Draggable,
    CodeEditor,
    CodeDialog
  },
  props: { 'data': {}, tables: { type: String, default: null }, flag: { type: String, default: null }},
  data() {
    return {
      treedata: null,
      tableList: [],
      tableid: null,
      selectablenwin: false,
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      }
    }
  },
  computed: {
    show() {
      if (this.data && Object.keys(this.data).length > 0 && this.data.key && this.data.options) {
        return true
      }
      return false
    }
  },
  watch: {
    tableid: {
      handler:function(val) {
        this.loadTreeDate()
      }
    },
    'data.options.isRange': function(val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.data.options.defaultValue = null
        } else {
          if (Object.keys(this.data.options).indexOf('defaultValue') >= 0) { this.data.options.defaultValue = '' }
        }
      }
    },
    'data.options.required': function(val) {
      this.validateRequired(val)
    },
    'data.options.requiredMessage': function(val) {
      this.validateRequired(this.data && this.data.options ? this.data.options.required : false)
    },
    'data.options.dataType': function(val) {
      this.validateDataType(val)
    },
    'data.options.dataTypeCheck': function(val) {
      this.validateDataType(this.data && this.data.options ? this.data.options.dataType : '')
    },
    'data.options.dataTypeMessage': function(val) {
      this.validateDataType(this.data && this.data.options ? this.data.options.dataType : '')
    },
    'data.options.pattern': function(val) {
      this.valiatePattern(val)
    },
    'data.options.patternCheck': function(val) {
      this.valiatePattern(this.data && this.data.options ? this.data.options.pattern : '')
    },
    'data.options.patternMessage': function(val) {
      this.valiatePattern(this.data && this.data.options ? this.data.options.pattern : '')
    },
    'data.options.options': {
      deep: true,
      handler(val) {
        if (typeof this.data.options.defaultValue === 'object' && Array.isArray(this.data.options.defaultValue)) {
          this.data.options.defaultValue = this.data.options.defaultValue.filter(item => val.map(item => item.value).includes(item))
        }
        if (typeof this.data.options.defaultValue === 'string') {
          if (typeof val === 'object' && !val.map(item => item.value).includes(this.data.options.defaultValue)) {
            this.data.options.defaultValue = ''
          }
        }
      }
    }
  },
  // watch: {
  //   'data.options.isRange': function(val) {
  //     if (typeof val !== 'undefined') {
  //       if (val) {
  //         this.data.options.defaultValue = null
  //       } else {
  //         if (Object.keys(this.data.options).indexOf('defaultValue') >= 0) { this.data.options.defaultValue = '' }
  //       }
  //     }
  //   },
  //   'data.options.required': function(val) {
  //     this.validateRequired(val)
  //   },
  //   'data.options.requiredMessage': function(val) {
  //     this.validateRequired(this.data && this.data.options ? this.data.options.required : false)
  //   },
  //   'data.options.dataType': function(val) {
  //     this.validateDataType(val)
  //   },
  //   'data.options.dataTypeCheck': function(val) {
  //     this.validateDataType(this.data && this.data.options ? this.data.options.dataType : '')
  //   },
  //   'data.options.dataTypeMessage': function(val) {
  //     this.validateDataType(this.data && this.data.options ? this.data.options.dataType : '')
  //   },
  //   'data.options.pattern': function(val) {
  //     this.valiatePattern(val)
  //   },
  //   'data.options.patternCheck': function(val) {
  //     this.valiatePattern(this.data && this.data.options ? this.data.options.pattern : '')
  //   },
  //   'data.options.patternMessage': function(val) {
  //     this.valiatePattern(this.data && this.data.options ? this.data.options.pattern : '')
  //   },
  //   'data.options.options': {
  //     deep: true,
  //     handler(val) {
  //       if (typeof this.data.options.defaultValue === 'object' && Array.isArray(this.data.options.defaultValue)) {
  //         this.data.options.defaultValue = this.data.options.defaultValue.filter(item => val.map(item => item.value).includes(item))
  //       }
  //       if (typeof this.data.options.defaultValue === 'string') {
  //         if (typeof val === 'object' && !val.map(item => item.value).includes(this.data.options.defaultValue)) {
  //           this.data.options.defaultValue = ''
  //         }
  //       }
  //     }
  //   }
  // },
  created() {
    console.log(this.data)
  },
  created() {
    // console.log(this.data)
  },

  methods: {
    selectablenwinOpen() {
      const $t = this
      // this.loadTreeDate();
      request({
        url: 'formMakingTableList',
        params: { flag: this.flag }
      }).then((data) => {
        if (data.data) {
          this.tableList = data.data
        }
      })
    },
    loadTreeDate() {
      const $t = this
      request({
        url: 'metaData',
        params: { tableId: this.tableid }
      }).then((data) => {
        if (data.data) {
          this.treedata = data.data
        }
      })
    },
    sureTabClumn() {
      const nodes = this.$refs.fieldtree.getCheckedNodes()
      if (nodes.length != 1) {
        $.message('请选择一个指标')
        return
      }
      const dt = nodes[0]
      this.data.tableId = dt.tableId
      this.data.property = dt.property
      this.data.tableCode = dt.tableCode
      this.data.fieldCode=dt.code
      this.data.model = dt.property,
      this.data.name = dt.name
      if (dt.dicFlag) { this.data.options.props.dicFlag = dt.dicFlag }
    },
    changeselectablenwinshow(show) { this.selectablenwin = show },
    handleOptionsRemove(index) {
      if (this.data.type === 'grid') {
        this.data.columns.splice(index, 1)
      } else if (this.data.type === 'tabs') {
        this.data.tabs.splice(index, 1)
      } else if (this.data.type === 'imgupload' || this.data.type === 'fileupload') {
        this.data.options.headers.splice(index, 1)
      } else {
        if (!this.data.options.remote && this.data.options.options[index].value) {
          this.data.options.defaultValue = typeof this.data.options.defaultValue === 'string' ? '' : []
        }

        this.data.options.options.splice(index, 1)
      }
    },
    handleAddOption() {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption'),
          label: this.$t('fm.config.widget.newOption')
        })
      } else {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption')
        })
      }
    },
    handleAddColumn() {
      this.data.columns.push({
        span: '',
        list: []
      })
    },
    handleAddTab() {
      const length = this.data.tabs.length

      this.data.tabs.push({
        label: this.$t('fm.config.widget.tab') + (length + 1),
        name: 'tab_' + new Date().getTime(),
        list: []
      })
    },
    handleAddHeader() {
      if ('headers' in this.data.options) {
        this.data.options.headers.push({
          key: '',
          value: ''
        })
      } else {
        this.$set(this.data.options, 'headers', [{ key: '', value: '' }])
      }
    },
    generateRule() {
      this.data.rules = []
      Object.keys(this.validator).forEach(key => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key])
        }
      })
    },
    handleSelectMuliple(value) {
      if (this.data.type == 'select') {
        if (value) {
          if (this.data.options.defaultValue) {
            this.data.options.defaultValue = [this.data.options.defaultValue]
          } else {
            this.data.options.defaultValue = []
          }
        } else {
          if (this.data.options.defaultValue.length > 0) {
            this.data.options.defaultValue = this.data.options.defaultValue[0]
          } else {
            this.data.options.defaultValue = ''
          }
        }
      }
    },

    handleSetTemplate() {
      this.$refs.codeDialog.open(this.data.options.template)
    },

    handleTemplateConfirm(value) {
      this.data.options.template = value

      this.$refs.codeDialog.close()
    },

    validateRequired(val) {
      if (val) {
        this.validator.required = { required: true, message: this.data.options.requiredMessage ? this.data.options.requiredMessage : `${this.$t('fm.config.widget.validatorRequired')}` }
      } else {
        this.validator.required = null
      }

      this.$nextTick(() => {
        this.generateRule()
      })
    },

    validateDataType(val) {
      if (!this.show) {
        return false
      }

      if (val && (this.data.options.dataTypeCheck || !Object.keys(this.data.options).includes('dataTypeCheck'))) {
        this.validator.type = { type: val, message: this.data.options.dataTypeMessage ? this.data.options.dataTypeMessage : this.$t('fm.config.widget.validatorType') }
      } else {
        this.validator.type = null
      }

      this.generateRule()
    },
    valiatePattern(val) {
      if (!this.show) {
        return false
      }

      if (val && (this.data.options.patternCheck || !Object.keys(this.data.options).includes('patternCheck'))) {
        this.validator.pattern = { pattern: val, message: this.data.options.patternMessage ? this.data.options.patternMessage : this.$t('fm.config.widget.validatorPattern') }
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    }
  }
}
</script>
